<template>
  <div>
    <van-nav-bar
      title="酒店"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="head_box">
      <p class="title">目的地</p>
      <div class="wz" @click="show=true">
        <h1 class="dest">
          <span v-if='address_name.length==0'>请选择目的地</span>
          <span v-else v-for="(v,k) in address_name" :key="k">{{v}} </span>
        </h1>
        <img src="../../assets/dw.png"/>
        <div style="clear:both"></div>
      </div>
      <div class="time">
        <div class="start" @click="startTime_show=true">
          <p class="t_title">入住</p>
          <h1>{{start_time.toLocaleDateString()}}</h1>
        </div>
        <div class="g">/</div>
        <div class="end" @click="endTime_show=true">
          <p class="t_title">离店</p>
          <h1>{{end_time.toLocaleDateString()}}</h1>
        </div>
        <div style="clear:both"></div>
      </div>
      <div class="btn">
        <button class="hotel_btn" @click="onSub">查找酒店</button>
      </div>
      <div class="list" v-if="list">

        <van-card
          v-for="(v,k) in list"
          :price="v.h_money"
          :desc="v.h_areaText"
          :title="v.h_name"
          :thumb="v.h_icon"
          @click="onChose(v.h_id)"
          :key="k"
        >
          <template #tags>
            {{v.h_address}}
          </template>
        </van-card>
      </div>
      <div class="list_empty" v-else>
        <van-empty :description="tips" />
      </div>
      <div style="clear:both"></div>
    </div>
    <van-popup v-model="show"  position="bottom">
      <van-area title="选择目的地" :area-list="areaList" @cancel="show=false" @confirm="onAddress"/>
    </van-popup>
    <van-popup v-model="startTime_show"  position="bottom">
      <van-datetime-picker
        v-model="start_time"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="startTime_show=false"
        @confirm="startTime_show=false"
      />
    </van-popup>
    <van-popup v-model="endTime_show"  position="bottom">
      <van-datetime-picker
        v-model="end_time"
        type="date"
        title="选择年月日"
        :min-date="start_time"
        :max-date="maxDate"
        @cancel="endTime_show=false"
        @confirm="endTime_show=false"
      />
    </van-popup>
  </div>
</template>

<script>
  import area from '../../js/area.js'

  export default{
    data(){
      return{
        areaList:area,
        address_name:[],
        start_time:new Date(),
        end_time:new Date(),
        show:false,
        startTime_show:false,
        endTime_show:false,
        minDate: new Date(),
        maxDate: new Date(2020,6,10),
        list:null,
        tips:'请选择目的地'
      }
    },
    watch:{
      "start_time":function(value,old_value){
        var date=new Date();

        var d=value.getTime()+24*60*60*1000;

        this.end_time=new Date(d);
      }
    }
    ,methods:{
      onClickLeft:function(){
        this.$router.push({path:'/'});
      },
      onAddress:function(arr){
        this.address_name=[];
        for(var i in arr){
          this.address_name.push(arr[i].name);
        }
        this.show=false
      },
      onSub:function(){
        var a_name=this.address_name;
        var s_time=this.start_time.getTime()/1000;
        var e_time=this.end_time.getTime()/1000;

        if(a_name.length<=0){
          return this.$toast.fail('请选择目的地');
        }

        var that=this

        var toast_load=this.$toast.loading({
          message: '查找中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/hotel/sear_btn',this.$qs.stringify({a_name:a_name,s_time:s_time,e_time:e_time})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.list=res.data.data.list;
            }else{
              toast_load.clear();
              that.tips='未查询到酒店';
              that.list=null;
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙,稍后查询');
          }
        )
      },
      onChose:function(id){
        this.$router.push({path:'/hotel_desc',query:{id:id}});
      }
    },
    created(){
      var date=new Date();
      var y=date.getFullYear();
      var m=date.getMonth()+3;
      var d=date.getTime()+24*60*60*1000;
      this.maxDate=new Date(y,m,1);
      this.end_time=new Date(d);
    }
  }
</script>

<style scoped>
  .head_box{
    padding:30rem 40rem;
  }
  .head_box .title{
    font-size:28rem;
    color:#474747;
  }
  .head_box .wz .dest{
    width:500rem;
    padding:20rem 0;
    font-size:38rem;
    color:#474747;
    border-bottom:1px solid #ccc;
    float:left;
  }
  .head_box .wz img{
    width:52rem;
    height:52rem;
    float:left;
    margin:20rem 50rem;
  }
  .head_box .time{
    margin-top:40rem;
    height:128rem;
    border-bottom:1px solid #ccc;
  }
  .head_box .time div{
    float:left;
    color:#474747
  }
  .head_box .time .start{
    width:300rem;
    text-align: center;
  }
  .head_box .time div .t_title{
    font-size:28rem;
    text-align: left;
  }
  .head_box .time div h1{
    font-size:38rem;
    margin:20rem 0;
  }
  .head_box .time .end{
    width:300rem;
    text-align: center;
  }
  .head_box .time .g{
    width:60rem;
    height:100rem;
    line-height:100rem;
    text-align: center;
    font-size:60rem;
  }
  .head_box .btn{
    margin:30rem 0;
  }
  .head_box .btn .hotel_btn{
    display: block;
    width: 100%;
    height: 100rem;
    margin: 0 auto;
    line-height: 100rem;
    background: -webkit-linear-gradient(136deg,#fdd133,#ffdb00);
    background: linear-gradient(314deg,#fdd133,#ffdb00);
    border-radius: 10rem;
    border: 0;
    color: #474747;
    font-size: 36rem;
    font-weight: 400;
    text-align: center;
  }
</style>
